<template>
  <a-row>
    <a-col :sm="24" :md="15" :xl="15">
      <div class="grape" id="grape" :style="{width: '100%', height: '340px', background: '#fff'}"></div>
    </a-col>
    <a-col :sm="24" :md="9" :xl="9">
      <div class="grapepie" id="sysservicetransinfo" :style="{height: '170px'}" style="margin-bottom: 10px;"></div>
			<div class="grapepie" id="sysrequesttransinfo" :style="{height: '170px'}"></div>
    </a-col>
  </a-row>
</template>

<script>
// import moment from 'moment'
import axios from 'axios'
import $ from 'jquery'
export default {
  name: 'SystemLast',
  data () {
    return {
      optionSystemLast: {
      },
      pieOption: {
        color: ['#2572bf', '#c9852f', '#c03636', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
        title: {
          text: '',
          top: 2,
          left: 'center',
          textStyle: {
            fontSize: 14,
            fontWeight: 'bolder',
            color: '#efefef' // 主标题文字颜色
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            var result = params.data.name + '</br>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f00"></span>' + '交易量:' + params.data.value + '</br>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>' + '耗时:' + params.data.useTime
            return result
          }
        },
        series: [
          {
            name: '交易量统计',
            type: 'pie',
            radius: '45%',
            center: ['50%', '68%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  watch: {
  },
  created () {
  },
  mounted () {
    this.getSystosyslast(true)
  },
  methods: {
    /**
    * 系统和系统的关系图
    **/
    getSystosyslast (status) {
      const _that = this
      axios.get('../data/systosyslast.json').then((res) => {
        // 用axios的方法引入地址-赋值
        // console.log('系统和系统的关系图--------', res.data.data)
        this.overtimelinks = res.data.data.overtimelinks
        const mySysteLastChart = this.$echarts.init(document.getElementById('grape'))
        const graph = res.data.data
        const categories = [{ name: '0-500 MS' }, { name: '500-1500 MS' }, { name: '>1500MS' }]
        graph.nodes.forEach(function (node) {
          node.itemStyle = {
            normal: {
              color: node.modularityClass === 0 ? '#2572bf' : node.modularityClass === 1 ? '#c9852f' : node.modularityClass === 2 ? '#c03636' : '#2572bf'
            }
          }
          node.value = node.symbolSize
          node.symbolSize /= 1.5
          node.label = {
            normal: {
              show: node.symbolSize > 10
            }
          }
          node.attributes = { modularity_class: node.modularityClass }
          node.category = node.attributes.modularity_class
        })
        graph.links.forEach(function (links) {
          links.lineStyle = {
            normal: {
              color: links.lineStyle === 0 ? '#2572bf' : links.lineStyle === 1 ? '#c9852f' : links.lineStyle === 2 ? '#c03636' : '#bca29b'
            }
          }
        })
        const optionSystemLast = {
          title: {
            text: '全行系统实时性能图',
            top: 'top',
            left: 'center',
            textStyle: {
              fontSize: 14,
              fontWeight: 'bolder',
              color: '#fff'// 主标题文字颜色
            }
          },
          width: '80%',
          tooltip: {
            position: 'inside',
            textStyle: {
              color: '#fff',
              decoration: 'none',
              fontFamily: 'Verdana, sans-serif',
              fontSize: 12
            },
            formatter: function (params) {
              _that.getSysServiceTransinfo(params.data.id)
              _that.getSysRequestTransinfo(params.data.id)
              let result = null
              if (params.data.lineStyle) {
                result = params.data.name + '</br>' + '<span class="dotradius" style="background-color: #2572bf"></span>' + '交易量:' + params.data.transCount + '</br>' + ((params.data.useTime >= 1500) ? '<span class="dotradius" style="background-color: #c03636"></span>' : (params.data.useTime >= 500 && params.data.useTime < 1500) ? '<span class="dotradius" style="background-color: #c9852f"></span>' : '<span class="dotradius" style="background-color: #2572bf"></span>') + '耗时: ' + params.data.useTime + 'MS'
              } else {
                result = params.data.name + '</br>' + '<span class="dotradius" style="background-color: #2572bf"></span>' + '受理交易量:' + params.data.transCount + '</br>' + ((params.data.useTime >= 1500) ? '<span class="dotradius" style="background-color: #c03636"></span>' : (params.data.useTime >= 500 && params.data.useTime < 1500) ? '<span class="dotradius" style="background-color: #c9852f"></span>' : '<span class="dotradius" style="background-color: #2572bf"></span>') + '受理耗时:' + params.data.useTime + 'MS</br>' + '<span class="dotradius" style="background-color: #2572bf"></span>' + '请求交易量:' + params.data.reqTransCount + '</br>' + ((params.data.reqUseTime >= 500) ? '<span class="dotradius" style="background-color: #c03636"></span>' : (params.data.reqUseTime >= 500 && params.data.reqUseTime < 1500) ? '<span class="dotradius" style="background-color: #c9852f"></span>' : '<span class="dotradius" style="background-color: #2572bf"></span>') + '请求耗时:' + params.data.reqUseTime + 'MS'
              }
              return result
            }
          },
          color: [ '#2572bf', '#c9852f', '#c03636' ],
          legend: [{
            orient: 'vertical',
            left: 0, // 当前直接只设置此具体像素值、百分比即可了
            bottom: 10,
            textStyle: {
              fontSize: 12, // 字体大小
              color: '#333' // 字体颜色
            },
            icon: 'circle',
            data: categories.map(function (a) {
              return a.name
            })
          }],
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              name: '节点信息',
              type: 'graph',
              layout: 'circular',
              top: '20%',
              right: '10%',
              bottom: '15%',
              left: '10%',
              circular: {
                rotateLabel: true
              },
              focusNodeAdjacency: true,
              data: graph.nodes,
              links: graph.links,
              edgeSymbol: ['circle', 'arrow'],
              categories: categories,
              roam: true,
              label: {
                position: 'right'
              },
              lineStyle: {
                color: 'target',
                curveness: 0.3
              }
            }
          ]
        }
        mySysteLastChart.setOption(optionSystemLast)
        mySysteLastChart.resize()
        window.addEventListener('resize', () => {
          mySysteLastChart.resize()
        })
        var faultByHourIndex = 0 // 播放所在下标
        if (status) {
          // let _that = this
          var loopTimer = null
          let isStop = false
          loopTimer = setInterval(function () {
            if (!isStop) {
              mySysteLastChart.dispatchAction({
                type: 'showTip', // 根据 tooltip 的配置项显示提示框。
                seriesIndex: 0,
                dataIndex: faultByHourIndex
              })
              faultByHourIndex++
              if (faultByHourIndex >= graph.nodes.length) {
                _that.getSystosyslast(false)
                faultByHourIndex = 0
              }
              console.log('节点index--------', faultByHourIndex)
            }
          }, 2000)
          // this.once在离开当前路由时销毁定时器
          this.$once('hook:beforeDestroy', () => {
            clearInterval(loopTimer)
          })

          // 鼠标移入停止轮播
          $('#grape').on('mousemove', function (e) {
            isStop = true
            mySysteLastChart.dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: e.dataIndex
            })
            console.log('暂停节点index--------', faultByHourIndex)
          })
          // 鼠标移出恢复轮播
          $('#grape').on('mouseout', function () {
            isStop = false
          })		
        }
      }).catch(function (error) { // 请求失败处理
        console.log(error)
      })
    },
    /**
    *某个系统受理哪些系统交易
    **/
    getSysServiceTransinfo (id) {
      axios.get('../data/sysservicetransinfo.json', { params: { sysid: id } }).then((res) => {
        // 用axios的方法引入地址-赋值
        if (res.data.msg === 'success') {
          this.drawPie('sysservicetransinfo', this.pieOption, '受理系统交易信息', res.data.data.nodes)
        }
      }).catch(function (error) { // 请求失败处理
        console.log(error)
      })
    },
    /**
    *某个系统请求哪些系统交易
    **/
    getSysRequestTransinfo (id) {
      axios.get('../data/sysrequesttransinfo.json', { params: { sysid: id } }).then((res) => {
        // 用axios的方法引入地址-赋值
        if (res.data.msg === 'success') {
          this.drawPie('sysrequesttransinfo', this.pieOption, '请求系统交易信息', res.data.data.nodes)
        }
      }).catch(function (error) { // 请求失败处理
        console.log(error)
      })
    },
    /**
    *echarts组装
    **/
    drawPie (id, option, title, sourceData) {
      const myPieChart = this.$echarts.init(document.getElementById(id))
      option.title.text = title
      option.series[0].data = []
      if (Array.isArray(sourceData) && sourceData.length !== 0) {
        sourceData.forEach(function (item) {
          option.series[0].data.push({ 'id': item.id, 'name': item.name, 'value': item.transCount, 'useTime': 42.02 })
        })
      } else {
        option.title.text = ''
      }
      myPieChart.setOption(option)
      myPieChart.resize()
      window.addEventListener('resize', () => {
        myPieChart.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
  /deep/.dotradius{
    display:inline-block;
    margin-right:5px;
    border-radius:10px;
    width:10px;
    height:10px;
  }
  .serviceidcount-list{
    padding: 0 10px;
    opacity: 0.8;
    height: 390px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    .serviceidcount-header{
      overflow: hidden;
      list-style: none;
      padding: 0;
      margin: 0;
      border-bottom: 2px solid #4b7797;
      position: relative;
      z-index: 100000;
      background: #4b7797;
      li{
				float: left;
				height: 31px;
				line-height: 31px;
				padding:0 5px;
				color: #fff;
				font-size: 14px;
				position: relative;
				z-index: 100000;
			}
      .th0{
				float: left;
				width: 9%;
			}
			.th1{
				float: left;
				width: 18%;
			}
			.th2{
				float: left;
				width: 30%;
			}
			.th3{
				float: left;
				width: 17%;
			}
			.th4{
				float: left;
				width: 24%;
			}
    }
    .serviceidcount-body{
      overflow: hidden;
      list-style: none;
      padding: 0;
      margin: 0;
      border-bottom: 1px solid #4b7797;
      position: relative;
      z-index: 1000;
      li{
				float: left;
				padding:0 5px;
				height: 31px;
				line-height: 31px;
				color: #333;
				font-size: 13px;
				overflow: hidden;
				white-space: nowrap;
        text-overflow: ellipsis;
      }
      .td0{
				float: left;
				width: 9%;
			}
			.td1{
				float: left;
				width: 18%;
			}
			.td2{
				float: left;
				width: 30%;
			}
			.td3{
				float: left;
				width: 17%;
			}
			.td4{
				float: left;
				width: 24%;
			}
    }
  }
</style>
